<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="searchData" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="searchData.productName" placeholder="请输入产品名称" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品编码" prop="productCode">
              <el-input v-model="searchData.productCode" placeholder="请输入产品编码" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关键字" prop="keywords">
              <el-input v-model="searchData.keywords" placeholder="请输入关键字" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拼音缩写" prop="pinyin">
              <el-input v-model="searchData.pinyin" placeholder="请输入拼音缩写" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search(0)">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-table :data="dataList" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="产品编码" prop="productCode" align="center">
        <template slot-scope="{row}">
          <span>
            {{row.productCode}}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="产品名称" prop="productName" align="center">
        <template slot-scope="{row}">
          <span>
            {{row.productName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="仓储" prop="stockName" align="center">
        <template slot-scope="{row}">
          <span>{{row.stockName}}</span>
        </template>
      </el-table-column>

      <el-table-column label="库存" prop="num" align="center">
        <template slot-scope="{row}">
          <span>{{row.num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="单位" prop="unit" align="center">
        <template slot-scope="{row}">
          <span>{{row.unit}}</span>
        </template>
      </el-table-column>

      <el-table-column label="品牌" prop="brand" align="center">
        <template slot-scope="{row}">
          <span>{{row.brand}}</span>
        </template>
      </el-table-column>

      <el-table-column label="厂家" prop="manufacturer" align="center">
        <template slot-scope="{row}">
          <span>{{row.manufacturer}}</span>
        </template>
      </el-table-column>

      <el-table-column label="过期时间" prop="expiredDate" align="center">
        <template slot-scope="{row}">
          <span>{{row.expiredDate | timeFormat}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="choose(row)">选中商品</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--<el-pagination
      :page-size="searchData.pageSize"
      layout="prev, pager, next"
      :total="searchData.totalCount"
      @prev-click="search(-1)"
      @next-click="search(1)"
    ></el-pagination>-->

    <pagination
      :total="searchData.totalCount"
      :page.sync="searchData.page"
      :limit.sync="searchData.pageSize"
      @pagination="search"
    />

  </div>
</template>

<script>
  import {searchProduct} from "@/api/product";
  import Pagination from "@/components/Pagination";


  export default {
    name: "Product",
    components: {Pagination},
    props: {
      list: Array
    },
    created() {
      this.search()
    },
    filters: {
      timeFormat(t) {
        return new Date(t).Format("yyyy-MM-dd")
      },
    },
    data() {
      return {
        searchData:{
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 20
        },
        dataList:[]
      };
    },
    methods: {
      choose(p){
        let repeat = false;
        this.list.forEach(function (item) {
          if (p.productCode === item.productCode && p.skuId === item.skuId && p.spuId === item.spuId) {
            repeat = true;
            item.stockNum = p.num
          }
        })
        if(!repeat){
          p.univalent = p.cost
          p.stockNum = p.num
          this.list.push(p)
        }
      },
      search(n) {
        if (typeof n === "number") {
          this.searchData.page = n;
        }
        searchProduct(this.searchData).then(response => {
          if (response.code === 200) {
            this.dataList = response.page.list;
            this.searchData.page = response.page.currPage;
            this.searchData.totalPage = response.page.totalPage;
            this.searchData.totalCount = response.page.totalCount;
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
